<template>
  <div>
    <c-header :p-title="'消息详情'">
      <div class="d-flex justify-content-end align-items-center">
        <button type="button" class="btn btn-sm btn-info d-lg-block"  @click="$router.go(-1)"><i class="fa fa-mail-reply m-r-sm"></i>返回</button>
        <btn-refresh class='m-l-15' :p-data='init'></btn-refresh>
      </div>
    </c-header>
    <div class="row page-content">
      <div class="col-md-12">
        <div class="card card-body printableArea">
          <h3><b>{{info.title}}</b> <span class="pull-right font-16">{{info.created_at}}</span></h3>
          <hr>
          <p>{{info.content}}</p>
        </div>
        <div>
          <div class="table-responsive" v-if="info.unread_list&&info.unread_list.length">
            <p>未读组员</p>
            <table class="vm table color-bordered-table base-bordered-table table-bordered table-hover">
              <thead>
              <tr class="nowrap">
                <!--<th>ID</th>-->
                <th>人员</th>
                <th>电话</th>
              </tr>
              </thead>
              <tbody >
              <tr v-for="(item,key) in info.unread_list">
                <!--<td>{{item.id}}</td>-->
                <td>{{item.name}}</td>
                <td>{{item.phone}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import serMessage from '../../serves/api-message'
    export default{
        props:{
            pParams:Object
        },
        data(){
            return{
                screenShow: false,
                id: '',
                info: {},
            }
        },
        computed:{
        },
        beforeMount(){
            this.$set(this, 'id',this.pParams&&this.pParams.id||this.$route.params.id);
            this.init();
        },
        methods:{
            async init(){
                this.$set(this, 'screenShow', false);
                let res = await serMessage.detail({
                    id: this.id
                });
                if (res.code == 1) {
                    this.$set(this, 'info',res.data||{});
                    this.$set(this, 'screenShow', true);
                } else {
                    this.$Message.error(res.message);
                    this.info = {};
                }
            }
        },
        components:{
        }
    }
</script>